<template>
  <div :class="topShow?'ivu-select-dropdowntop':'ivu-select-dropdown'" :style="styles">
    <slot></slot>
  </div>
</template>
<script>
import {
  getStyle
} from '../../utils/assist';
import Popper from 'popper.js';

export default {
  name: 'Drop',
  props: {
    topShow: {
      type: Boolean,
      default: false
    },
    placement: {
      type: String,
      default: 'bottom-start'
    }
  },
  data() {
    return {
      popper: null,
      width: ''
    };
  },
  computed: {
    styles() {
      let style = {};
      if (this.width) style.width = `${this.width}px`;
      return style;
    }
  },
  methods: {
    update() {
      if (this.popper) {
        this.$nextTick(() => {
          this.popper.update();
        });
      } else {
        this.$nextTick(() => {
          this.popper = new Popper(this.$parent.$refs.reference, this.$el, {
            gpuAcceleration: false,
            placement: this.placement,
            boundariesPadding: 0,
            forceAbsolute: true,
            boundariesElement: 'body'
          });
          this.popper.onCreate(popper => {
            this.resetTransformOrigin(popper);
          });
        });
      }
      // set a height for parent is Modal and Select's width is 100%
      if (this.$parent.$options.name === 'iSelect') {
        this.width = parseInt(getStyle(this.$parent.$el, 'width'));
      }
    },
    destroy() {
      if (this.popper) {
        this.resetTransformOrigin(this.popper);
        setTimeout(() => {
          this.popper.destroy();
          this.popper = null;
        }, 300);
      }
    },
    resetTransformOrigin(popper) {
      let placementMap = {
        top: 'bottom',
        bottom: 'top'
      };
      let placement = popper._popper.getAttribute('x-placement').split('-')[0];
      let origin = placementMap[placement];
      popper._popper.style.transformOrigin = `center ${ origin }`;
    }
  },
  created() {
    this.$on('on-destroy-popper', this.destroy);
  },
  beforeDestroy() {
    if (this.popper) {
      this.popper.destroy();
    }
  }
};
</script>
<style lang="scss" scoped>
  .ivu-select-dropdowntop {
    display: block;
    overflow: auto;
    margin: 5px auto;
    padding: 5px 0;
    background-color: #fff;
    box-sizing: border-box;
    border: 1px solid #d7dde4;
    border-radius: 3px;
    position: absolute;
    top: -141px;
    z-index: 300;
    animation-duration: 0.1s;
    animation-play-state: paused;
  }
  
</style>
